<template>
  <!-- 布局结构树 -->
  <div>
    <el-divider>布局结构树</el-divider>
    <el-tree :data="layoutTree" :props="defaultProps" node-key="renderKey" default-expand-all>
      <span slot-scope="{ node, data }">
        <span class="node-label">
          <svg-icon
            v-if="data.__config__&&data.__config__.tagIcon"
            class="node-icon"
            :icon-class="data.__config__.tagIcon"
          />
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { traverseTree, deepClone, cleanTree } from "../utils/index";

export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      defaultProps: {
        label(data) {
          if (data.__config__?.componentName)
            return data.__config__?.componentName;
          if (data.__config__?.label || data.__config__?.formId)
            return `${data.__config__.label}: ${data.__config__.formId}`;
          if (data.id) return data.id;
          return data.label;
        }
      }
    };
  },
  computed: {
    layoutTree() {
      const tree = cleanTree([deepClone(this.value)]);
      traverseTree(tree, node => {
        node.children = node?.children;
      });
      return tree;
    }
  }
};
</script>

<style lang="scss" scoped>
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
</style>